<template>
    <div>
        <el-form :inline="true" :model="searchMap" class="demo-form-inline">
            <el-form-item label="输入搜索">
                <el-input v-model="searchMap.id" placeholder="订单编号"></el-input>
            </el-form-item>
            <el-form-item label="收货人">
                <el-input v-model="searchMap.receiverContact" placeholder="收货人/手机号码"></el-input>
            </el-form-item>
            <el-form-item label="提交时间">
                <el-date-picker
                v-model="searchMap.createTime"
                align="right"
                type="date"
                placeholder="请选择时间"
                :picker-options="pickerOptions"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
         <!--数据表格-->
      <template class="tableTemplate">
        <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
            label="订单编号"
            width="180" prop="id">
        </el-table-column>
        <el-table-column
            label="提交时间"
            width="180" prop="createTime">
             <template slot-scope="scope">
                {{scope.row.createTime | dateFormat}}
            </template>
        </el-table-column>
        <el-table-column
            label="用户账号"
            width="180" prop="username">
        </el-table-column>
        <el-table-column
            label="收货人"
            prop="receiverContact">
            <template slot-scope="scope">
                {{scope.row.payType == '0'? '未支付':scope.row.payType == '1'? '支付宝':'货到付款'}}
            </template>
        </el-table-column>
        <el-table-column
            label="订单金额"
            prop="totalMoney">
            <template slot-scope="scope">
                ￥{{scope.row.totalMoney}}
            </template>
        </el-table-column>
        <el-table-column
            label="订单状态"
            prop="orderStatus">
            <template slot-scope="scope">
                {{scope.row.orderStatus == '0'? '待付款':
                scope.row.orderStatus == '1'? '待发货':
                scope.row.orderStatus == '2'? '已发货':
                scope.row.orderStatus == '3'? '已完成':
                '已关闭'}}
            </template>
        </el-table-column>
        <el-table-column
            label="自动确认收货时间"
            width="180" prop="takeTimeout">
            <template slot-scope="scope">
                {{scope.row.takeTimeout}}天
            </template>
        </el-table-column>
        <el-table-column
            label="订单应收货时间"
            width="180" prop="ArrivalTime">
            <template slot-scope="scope">
                {{scope.row.ArrivalTime | dateFormat}}
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
            <el-button
                size="mini"
                @click="addOrUpdateForm(scope.row.id)">查看订单</el-button>
            <el-button
                size="mini"
                @click="updateOrder(scope.row)">确认收货</el-button>
            </template>
        </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizeList"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </template>
    </div>
</template>
<script>
export default {
  data () {
    return {
      // 显示数据
      tableData: [],
      // 当前页数
      currentPage: 1,
      // 页大小
      pageSize: 10,
      // 当前页显示多少数据
      pageSizeList: [10, 20, 50],
      // 总记录数
      total: 0,
      // 查询表单对象
      searchMap: {},
      // 对话框状态
      dialogFormVisible: false,
      // 对话框表单提交的数据
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      }
    }
  },
  methods: {
    // 获取品牌信息列表
    async getfindAll () {
      // 发送请求查询数据并返回
      this.searchMap.orderStatus = 2
      const { data: res } = await this.$http.post(`/orders/order/findPage/${this.currentPage}/${this.pageSize}`, this.searchMap)
      const { data: config } = await this.$http.get('/orders/order/config/findById/1')
      this.tableData = res.data.rows
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i].takeTimeout = config.data.takeTimeout
        var date = new Date(this.tableData[i].createTime) // 获取时间
        date = date.setDate(date.getDate() + this.tableData[i].takeTimeout)
        date = new Date(date)
        this.tableData[i].ArrivalTime = date
      }
    },
    // 查询按钮
    onSubmit () {
      this.getfindAll()
    },
    // 页大小改变
    async handleSizeChange (val) {
      this.pageSize = val
      this.getfindAll()
    },
    // 页码改变
    async handleCurrentChange (val) {
      this.currentPage = val
      this.getfindAll()
    },
    // 确认收货
    async updateOrder (val) {
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id === val.id) {
          this.searchMap = this.tableData[i]
        }
      }
      this.searchMap.orderStatus = 3
      console.log(this.searchMap)
      const { data: res } = await this.$http.post('/orders/order/update', this.searchMap)
      if (res.code === 200) {
        this.$message({
          type: 'success',
          message: '订单已签收'
        })
        this.searchMap = {}
        this.getfindAll()
      }
    }
  },
  // 钩子函数
  async created () {
    this.getfindAll()
  }
}
</script>
